﻿@page "/"

@inject IJSRuntime JsInterop

<style>
    @@media print {
        /* Hide elements from the page you do not want printed, customize the page */
        .sidebar, .top-row {
            display: none;
        }

        html {
            font: 11pt sans-serif;
        }
        /* sample customizations for the grid when printed */
        .k-grid {
            border-top-width: 0;
        }

        .k-grid, .k-grid-content {
            height: auto !important;
        }

        .k-grid-header {
            padding-right: 0 !important;
        }

        .k-grid-content {
            overflow: visible !important;
        }

        table.k-grid table {
            table-layout: auto;
            width: 100% !important;
        }

        .k-grid .k-grid-header th {
            border-top: 1px solid;
        }

        .k-filter-row, .k-grid-pager, .k-grouping-header, .k-grid-toolbar, .k-grid-pager > .k-link {
            display: none;
        }
    }
</style>

<TelerikGrid Data="@MyData" Height="400px"
             Pageable="true" Sortable="true" Groupable="true"
             FilterMode="Telerik.Blazor.GridFilterMode.FilterRow"
             Resizable="true" Reorderable="true">
    <GridToolBar>
        <GridCommandButton Command="Print" OnClick="@Print" Icon="print">Print</GridCommandButton>
    </GridToolBar>
    <GridColumns>
        <GridColumn Field="@(nameof(SampleData.Id))" Width="120px" />
        <GridColumn Field="@(nameof(SampleData.Name))" Title="Employee Name" Groupable="false" />
        <GridColumn Field="@(nameof(SampleData.Team))" Title="Team" />
        <GridColumn Field="@(nameof(SampleData.HireDate))" Title="Hire Date" />
    </GridColumns>
</TelerikGrid>

@code {
    async Task Print()
    {
        await JsInterop.InvokeVoidAsync("print");
    }

    public IEnumerable<SampleData> MyData = Enumerable.Range(1, 30).Select(x => new SampleData
    {
        Id = x,
        Name = "name " + x,
        Team = "team " + x % 5,
        HireDate = DateTime.Now.AddDays(-x).Date
    });

    public class SampleData
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Team { get; set; }
        public DateTime HireDate { get; set; }
    }
}